<template>
  <div class="Line-frame">
    <Card :name="name">
      <template #body>
        <div class="com-flex-c com-center com-full">
          <div class="line com-flex-c">
            <div
              :class="['com-flex-r com-center strip-num', { active: index === active }]"
              v-for="(item, index) in list"
              :key="index"
              @click="lintClk(item, index)"
            >
              <div class="com-flex-r com-center">
                <div class="dian"></div>
                <span class="text">{{ item.equipmentNameNoP1 ?? "--" }}</span>
              </div>
              <img src="/imgs/45.png" alt="" />
              <div class="com-flex-r com-center">
                <div class="dian"></div>
                <span class="text">{{ item.equipmentNameNoP2 ?? "--" }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Card>
  </div>
</template>
<script setup>
import ueMsg from "/public/js/app.js";
import Card from "@/components/Card/Card.vue";
import { onMounted, ref } from "vue";
import api from "@/api";

const active = ref("");
const list = ref([]);
const lintClk = (item, index) => {
  if (active.value !== index) {
    active.value = index;
    ueMsg.apiSend({
      SelectWiring: `${item.equipmentNoP1},${item.equipmentNoP2}`,
    });
  }
};
const name = "全部链路";
const dataInit = async () => {
  const para = {
    pageSize: 100,
  };
  const {
    data: { records },
  } = await api.getPxList(para);
  list.value = records;
};
onMounted(() => {
  dataInit();
});
</script>

<style lang="scss" scoped>
.Line-frame {
  width: 100%;
  height: 100%;

  .line {
    width: 85%;
    height: 81%;
    overflow-y: auto;
    pointer-events: all;

    .strip-num {
      cursor: pointer;
      margin-bottom: 6%;
    }

    .dian {
      width: 8px;
      height: 8px;
      background: #ffffff;
      border-radius: 50%;
      margin-right: 10px;
    }

    .text {
      font-size: calc(var(--fs) * 0.95);
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #ffffff;
      letter-spacing: 2.4px;
    }

    img {
      margin: 0 8%;
      width: 52px;
      height: 21px;
    }
  }
}

.active {
  .dian {
    background-color: aqua !important;
  }

  .text {
    color: aqua !important;
  }
}
</style>
